.popup {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9900;
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		opacity: 0;
		-webkit-transition: all 0.24s ease-out;
	}
	&.show {
		.panel {
			-webkit-transform: translate(0,0);
		}
		.bg {
			opacity: 1;
		}
	}
	.panel {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 2;
		width: 100%;
		-webkit-transition: all 0.24s ease-out;
		-webkit-transform: translate(0,100%);
		background: #fff;
		border-top: 1px solid rgb(242,242,242);
		.top {
			a {
				float: right;
				display: block;
				padding: 0.2rem;
				line-height: 1.5;
				font-size: 0.28rem;
				color: #00bb44;
				&:active {
					opacity: 0.7;
				}
			}
		}
		.list {
			border-top: 1px solid rgb(242,242,242);
		}
		.list a {
			display: block;
			float: left;
			width: 12.5%;
			overflow: hidden;
			position: relative;
			border: 1px solid rgb(242,242,242);
			&:after {
				content: "";
				display: block;
				margin-top: 100%;
			}
			&:active {
				background: rgb(242,242,242);
			}
			&.active {
				background: #00bb44;
				border: 1px solid #00bb44;
				span {
					color: #fff;
				}
			}
			span {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: -webkit-box;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				font-size: 0.26rem;
				color: rgb(74,74,74);
			}
		}
	}
}